import { Card, FormLayout, TextField, RangeSlider } from '@shopify/polaris';
import './PropertyPanel.css';

interface PropertyPanelProps {
  selectedElement: any;
  onPropertyChange: (property: string, value: any) => void;
}

export const PropertyPanel: React.FC<PropertyPanelProps> = ({
  selectedElement,
  onPropertyChange,
}) => {
  if (!selectedElement) {
    return (
      <Card>
        <div className="property-panel">
          <p>请选择一个元素进行编辑</p>
        </div>
      </Card>
    );
  }

  return (
    <Card>
      <div className="property-panel">
        <FormLayout>
          <TextField
            label="位置 X"
            type="number"
            value={selectedElement.left?.toString() || '0'}
            onChange={(value) => onPropertyChange('left', parseFloat(value))}
            autoComplete="off"
          />
          <TextField
            label="位置 Y"
            type="number"
            value={selectedElement.top?.toString() || '0'}
            onChange={(value) => onPropertyChange('top', parseFloat(value))}
            autoComplete="off"
          />
          <RangeSlider
            label="缩放"
            value={selectedElement.scaleX || 1}
            min={0.1}
            max={3}
            step={0.1}
            onChange={(value) => {
              onPropertyChange('scaleX', value);
              onPropertyChange('scaleY', value);
            }}
          />
          <RangeSlider
            label="旋转"
            value={selectedElement.angle || 0}
            min={0}
            max={360}
            step={1}
            onChange={(value) => onPropertyChange('angle', value)}
          />
        </FormLayout>
      </div>
    </Card>
  );
}; 